<template>
    <div class="network-dialog">
        <el-dialog :title="isAdd === 1 ? '新增VPN服务' : isAdd === 2 ? '编辑VPN服务' : isAdd === 3 ? 'VPN服务详情' : 'VPN服务详情'"
            :visible.sync="showDialog" :before-close="handleClose" @update:showDialog="toggleDialog"
            :width="isWidth ? '50%' : '60%'">
            <div>
                <el-form label-width="170px" :inline="true" :rules="rules" :model="vpnInfo" ref="vpnInfo">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请单位：" prop="unit">
                                <el-input v-if="isUpdata" v-model="vpnInfo.unit" placeholder="请输入申请单位"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="通信地址：" prop="address">
                                <el-input v-if="isUpdata" v-model="vpnInfo.address" placeholder="请输入通信地址"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.address }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12"> <el-form-item label="统一社会信用代码：" prop="uniformSocialCreditCode">
                                <el-input v-if="isUpdata" v-model="vpnInfo.uniformSocialCreditCode"
                                    placeholder="请输入统一社会信用代码" :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                        <el-col :span="12">
                            <el-form-item label="VPN负责人:" prop="person">
                                <el-input v-if="isUpdata" v-model="vpnInfo.person" placeholder="请输入VPN负责人"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="12"> <el-form-item label="负责人手机：" prop="mobilePhone">
                                <el-input v-if="isUpdata" v-model.number="vpnInfo.mobilePhone" placeholder="请输入负责人手机"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                        <el-col :span="12"> <el-form-item label="负责人电话：" prop="phone">
                                <el-input v-if="isUpdata" v-model.number="vpnInfo.phone" placeholder="请输入负责人电话"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="12"> <el-form-item label="负责人邮箱：" prop="email">
                                <el-input v-if="isUpdata" v-model="vpnInfo.email" placeholder="请输入负责人邮箱"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                        <el-col :span="12"> <el-form-item label="主要应用用途：" prop="purpose">
                                <el-input v-if="isUpdata" v-model="vpnInfo.purpose" placeholder="请输入主要应用用途"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item></el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="使用人数：" prop="numberOfPeople">
                                <el-input v-if="isUpdata" v-model.number="vpnInfo.numberOfPeople" placeholder="请输入使用人数"
                                    :disabled="isUpdata ? false : true"></el-input>
                                <span v-else>{{ vpnInfo.unit }}</span>
                            </el-form-item>

                        </el-col>

                    </el-row>

                    <h2 style="margin-left: 50px;">业务信息</h2>
                    <div class="business">
                        <el-form-item prop="resourceInfoList" style="margin-left: 80px">

                            <el-table :data="vpnInfo.resourceInfoList" size="small" border style="width:635px;">
                                <el-table-column label="资源名称" width="127">
                                    <!-- 关键代码 -->
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.resourceName" v-if="isUpdata"
                                            @focus="focusEvent(scope.row, scope.$index, scope.column)"
                                            @blur="blurEvent(scope.row, scope.$index, scope.column)" v-focus
                                            :disabled="isUpdata ? false : true" style="padding-left: 0px;"></el-input>
                                        <p v-else>{{ scope.row.resourceName }} </p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="IP地址" width="127">
                                    <!-- 通过isageSelected显示或隐藏 -->
                                    <template slot-scope="scope">
                                        <el-input v-if="isUpdata" v-model="scope.row.ip"
                                            @focus="focusEvent(scope.row, scope.$index, scope.column)"
                                            @blur="blurEvent(scope.row, scope.$index, scope.column)" v-focus
                                            :disabled="isUpdata ? false : true"></el-input>
                                        <p v-else>{{ scope.row.ip }} </p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="端口号" width="127">
                                    <template slot-scope="scope">
                                        <!-- 通过issalSelected显示或隐藏 -->
                                        <el-input v-if="isUpdata" v-model="scope.row.port"
                                            @focus="focusEvent(scope.row, scope.$index, scope.column)"
                                            @blur="blurEvent(scope.row, scope.$index, scope.column)" v-focus
                                            :disabled="isUpdata ? false : true"></el-input>
                                        <p v-else>{{ scope.row.port }} </p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="传输协议" width="127">
                                    <template slot-scope="scope">
                                        <!-- 通过issalSelected显示或隐藏 -->
                                        <el-input v-if="isUpdata" v-model="scope.row.protocol"
                                            @focus="focusEvent(scope.row, scope.$index, scope.column)"
                                            @blur="blurEvent(scope.row, scope.$index, scope.column)" v-focus
                                            :disabled="isUpdata ? false : true"></el-input>
                                        <p v-else>{{ scope.row.protocol }} </p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="端口说明">
                                    <template slot-scope="scope">
                                        <!-- 通过issalSelected显示或隐藏 -->
                                        <el-input v-if="isUpdata" v-model="scope.row.description"
                                            @focus="focusEvent(scope.row, scope.$index, scope.column)"
                                            @blur="blurEvent(scope.row, scope.$index, scope.column)" v-focus
                                            :disabled="isUpdata ? false : true" style="padding-left: 0px;"></el-input>
                                        <p v-else>{{ scope.row.description }} </p>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button @click="add()" type="success" icon="el-icon-plus"
                                v-if="isUpdata ? true : false"></el-button>
                            <el-button @click="del()" type="danger" icon="el-icon-minus"
                                v-if="isUpdata ? true : false"></el-button>
                        </el-form-item>
                    </div>


                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="isAdd !== 3" type="primary" @click="vpnInfoAdd('vpnInfo')">确定</el-button>
                <el-button @click="handleClose()">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { vpnAdd, vpnEdit } from '@/api/vpnManage/vpnManage.js'
export default {
    data() {
        return {
            vpnInfo: {
                unit: '',
                address: '',
                email: '',
                uniformSocialCreditCode: '',
                person: '',
                phone: '',
                email: '',
                purpose: '',
                mobilePhone: '',
                numberOfPeople: '',
                resourceInfoList: [
                    {
                        resourceName: '',
                        ip: '',
                        port: '',
                        protocol: '',
                        description: '',
                    },
                ],
            },
            falg: false,
            showAddSegmentDialog: '',
            rules: {
                unit: [
                    { required: true, message: "请填写申请单位", trigger: "blur" },
                ],
                address: [
                    { required: true, message: "请填写通信地址", trigger: "blur" },
                ],
                uniformSocialCreditCode: [
                    { required: true, message: "请填写统一社会信用代码", trigger: "blur" },
                ],
                person: [
                    { required: true, message: "请填写VPN负责人", trigger: "blur" },
                ],
                mobilePhone: [
                    { required: true, message: "请填写负责人手机", trigger: "blur" },
                ],
                phone: [
                    { required: true, message: "请填写负责人电话", trigger: "blur" },
                ],
                email: [
                    { required: true, message: "请填写负责人邮箱", trigger: "blur" },
                ],
                purpose: [
                    { required: true, message: "请填写主要应用用途", trigger: "blur" }
                ],
                numberOfPeople: [
                    { required: true, message: "请填写使用人数", trigger: "blur" },
                    { type: 'number', message: '使用人数必须为数字值' }
                ],

            },
            screenWidth: '',
            isWidth: false,
        };
    },
    components: {},
    props: {
        //弹窗显、隐
        showDialog: {
            type: Boolean,
            default: false,
        },
        isAdd: {},
        vpnDetailList: {},
        isUpdata: {},
        isEdit: {}

    },
    inject: ['updata',],
    methods: {
        // 弹窗关闭
        handleClose() {
            this.toggleDialog();
        },
        toggleDialog(visible = false) {
            this.$emit("update:showDialog", visible);
        },
        submitForm(formName) {
            this.$refs[formName].vpnInfo.resourceInfoList((valid) => {
                if (valid) {
                    this.operateIpAddress();
                } else {
                    return false;
                }
            });
        },
        async operateIpAddress() {
            let methods = this.isAdd ? addIPAddress : updateIPAddress;
            const result = await methods({ ...{ id: 0 }, ...this.form });
            this.$message({
                type: "success",
                message: result.msg,
            });
            this.$emit("updateList")
            this.handleClose();
        },
        cellClick(row, column) {
            if (column.label == "资源名称") {
                row.isnameSelected = !row.isnameSelected
            } else if (column.label == "IP地址") {
                row.isIpSelected = !row.isIpSelected
            } else if (column.label == "端口号") {
                row.isPortSelected = !row.isPortSelected
            } else if (column.label == "传输协议") {
                row.isProtocolSelected = !row.isProtocolSelected
            } else if (column.label == "端口说明") {
                row.isDescriptionSelected = !row.isDescriptionSelected
            }
        },
        focusEvent(row, index, column) {
            if (column.label == "资源名称") {
                row.oldResourceName = row.resourceName
            } else if (column.label == "IP地址") {
                row.oldIp = row.ip
            } else if (column.label == "端口号") {
                row.oldPort = row.port

            } else if (column.label == "传输协议") {
                row.oldPort = row.port

            } else if (column.label == "端口说明") {
                row.oldPort = row.port
            }

        },
        add() {
            const newVpn = {
                resourceName: '',
                ip: '',
                port: '',
                protocol: '',
                description: '',
                isnameSelected: false,
                isIpSelected: false,
                isPortSelected: false,
                isProtocolSelected: false,
                isDescriptionSelected: false
            }
            const Len = this.vpnInfo.resourceInfoList.length
            const oldLIst = this.vpnInfo.resourceInfoList[Len - 1]
            const arr = Object.keys(oldLIst).splice(0, 5);
            arr.filter(item => {
                if (oldLIst[item] === '') {
                    this.falg = false
                    return
                } else {
                    this.falg = true
                }
                return
            })
            if (this.falg) {
                this.vpnInfo.resourceInfoList.push(newVpn)
                this.$set(this.vpnInfo.resourceInfoList, this.vpnInfo.resourceInfoList, this.vpnInfo.resourceInfoList)
            } else {
                this.$message({
                    message: '不能存在空值',
                    type: 'warning'
                });
            }
        },
        del() {
            if (this.vpnInfo.resourceInfoList.length === 1) {
                this.$message({
                    message: '请至少填写一条业务信息',
                    type: 'warning'
                });
            } else {

                this.vpnInfo.resourceInfoList.pop()
                this.$set(this.vpnInfo.resourceInfoList, this.vpnInfo.resourceInfoList, this.vpnInfo.resourceInfoList)
                console.log(this.vpnInfo.resourceInfoList);
            }
        },
        //输入框失去焦点触发,此处用提示框提示修改
        blurEvent(row, curIndex, column) {
            if (column.label == "资源名称") {
                row.isnameSelected = !row.isnameSelected
            } else if (column.label == "IP地址") {
                row.isIpSelected = !row.isIpSelected
            } else if (column.label == "端口号") {
                row.isPortSelected = !row.isPortSelected
            } else if (column.label == "传输协议") {
                row.isProtocolSelected = !row.isProtocolSelected
            } else if (column.label == "端口说明") {
                row.isDescriptionSelected = !row.isDescriptionSelected
            }

        },
        //确定按钮
        async vpnInfoAdd(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.vpnInfo.resourceInfoList.length === 0) {
                        this.$message({
                            message: '请至少填写一条业务信息',
                            type: 'warning'
                        });
                    } else {
                        const Len = this.vpnInfo.resourceInfoList.length
                        const oldLIst = this.vpnInfo.resourceInfoList[Len - 1]
                        const arr = Object.keys(oldLIst).splice(0, 5);
                        arr.filter(item => {
                            if (oldLIst[item] === '') {
                                this.falg = false
                                return
                            } else {
                                this.falg = true
                            }
                            return
                        })
                        console.log(this.falg);
                        if (this.falg === false) {
                            this.$message({
                                message: '不能存在空值',
                                type: 'warning'
                            });
                        }
                    }
                    if (this.falg === true) {

                        if (this.isEdit) {
                            const result = await vpnEdit(this.vpnInfo)
                            if (result.code == 200) {

                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.handleClose()
                                this.updata()
                            }
                        } else {
                            const result = await vpnAdd(this.vpnInfo)
                            if (result.code === 200) {
                                this.$message({
                                    message: 'VPN新增成功',
                                    type: 'success'
                                });
                                this.handleClose()
                                this.updata()
                            }
                        }
                    }
                }


            })
        }

    },
    watch: {
        screenWidth: {
            handler: function (val, oldVal) {
                if (val <= 1280) {
                    this.isWidth = false
                } else {
                    this.isWidth = true
                }
            },
            immediate: true
        },
    },
    created() {
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {   //屏幕尺寸变化就重新赋值
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        }
        if (this.vpnDetailList) {
            this.vpnInfo = this.vpnDetailList
            if (this.isAdd !== 2) {
                this.rules = {}
            }
        }
    },

};
</script>
<style lang="scss" scoped>
.business {
    ::v-deep .el-table .cell {
        padding-left: 0;
    }

    ::v-deep .el-input__inner {
        // width: 80%;
    }

    ::v-deep .el-input {
        width: 128px;
    }
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
    padding-left: 0px;
}

::v-deep .el-table .el-table__cell {
    padding: 0;
}


::v-deep .el-input__inner {

    padding: 0;
}

::v-deep .el-dialog__body {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

::v-deep .el-table {
    margin-bottom: 2vh;
}
</style>
  